<template>
	<div class="order layout-pd">
		<el-row>
			<!-- 基础信息 -->
			<el-col :span="24" class="order-info">
				<el-card shadow="hover">
					<template #header>
						<span>基础信息</span>
					</template>
					<div class="order-info-box">
						<el-form :model="state.orderData"  label-width="80px" label-position="left">
							<el-row :gutter="35">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
									<el-row :gutter="35">
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="订单号">
												<span>{{ state.orderData.order?.snkey }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="销售时间">
												<span>{{ state.orderData.order?.alterTime }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="操作时间">
												<span>{{ state.orderData.order?.createdTime }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="订单状态">
												<span>{{ state.orderData.order?.payStatus }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="操作终端">
												<span>{{ state.orderData.order?.device }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="订单来源">
												<span>{{ state.orderData.order?.source }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="销售门店">
												<span>{{ state.orderData.order?.store }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="操作员工">
												<span>{{ state.orderData.order?.createdBy }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="IP">
												<span>{{ state.orderData.order?.ip }}</span>
											</el-form-item>
										</el-col>
										
									</el-row>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</el-card>
			</el-col>

			<!-- 会员信息 -->
			<el-col :span="24" class="order-info">
				<el-card shadow="hover" class="mt15">
					<template #header>
						<span>会员信息</span>
					</template>
					<div class="order-info-box">
						<el-form :model="state.orderData.order"  label-width="80px" label-position="left">
							<el-row :gutter="35">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
									<el-row :gutter="35">
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="会员ID">
												<span>{{ state.orderData.order?.userId }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="会员姓名">
												<span>{{ state.orderData.order?.name }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="会员等级">
												<!-- <span>{{ state.orderData.level }}</span> -->
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="付费会员">
												<span v-if="state.orderData.isMembership">{{ state.orderData.membership }}</span>
												<span v-else> - </span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="开卡门店">
												<span>{{ state.orderData.order?.node }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="手机号">
												<span>{{ state.orderData.order?.phone }}</span>
											</el-form-item>
										</el-col>
									</el-row>
								</el-col>
							</el-row>
						</el-form>
						
					</div>
				</el-card>
			</el-col>
			<!-- 商品详情 -->
			<el-col :span="24">
				<el-card shadow="hover" class="mt15" header="商品详情">
					<!-- 销售订单 -->
					<el-row v-if="state.orderData.order?.type == 1">
						<el-table :data="state.orderData.order?.itemsList2" border style="width: 100%">
							<el-table-column type="expand">
								<template #default="scope">
									<div>
										<p class="ml20">
											<span>
												<span v-for="(item,index) in scope.row.paymentList" :key="index">
													{{ item.payment }}:￥:{{ item.money }}元
												</span>
												销售人: 
												<span v-for="(item,index) in scope.row.rebateList" :key="index">
													{{ item.employee }}(ID:{{ item.id }}){{ item.proportion }}
												</span>
												<span>储值卡优惠：{{ scope.row.ppcAlterMoney }}</span>
												<span>手动优惠：{{ scope.row.alterMoney }}</span>
											</span>
										</p>
									</div>
								</template>
							</el-table-column>
							<el-table-column width="290px" label="商品信息">
								<template #default="scope">
									<div class="goodBox"  style="display: flex;justify-content: space-between;">
										<div style="display: flex;align-items: center;">
											<div style="width:48px; height: 48px;">
												<el-image style="width:48px; height: 48px;border-radius: 5px;" :src="scope.row.cover" fit="cover" />
											</div>
											<div class="ml5">
												<p class="px2 goodMsg">{{ scope.row.title }}</p>
												<p class="px2 goodMsg">{{ scope.row.cardType }}{{ scope.row.attrValues }}</p>
											</div>
										</div>
										<div class="mr15">
											x{{ scope.row.number }}
										</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="零售价">
								<template #default="scope">
									<span> ￥{{ scope.row.originPrice }}元 </span>
								</template>
							</el-table-column>
							<el-table-column  label="会员价">
								<template #default="scope">
									<span> ￥{{ scope.row.plusPrice }}元 </span>
								</template>
							</el-table-column>
							
							<el-table-column label="零售总价">
								<template #default="scope">
									<span> ￥{{ scope.row.originAmount }}元 </span>
								</template>
							</el-table-column>
							<el-table-column label="实售总价">
								<template #default="scope">
									<span> ￥{{ scope.row.amount }}元 </span>
								</template>
							</el-table-column>
							<el-table-column label="小计">
								<template #default="scope">
									<span> ￥{{ scope.row.worth }}元 </span>
								</template>
							</el-table-column>
							<el-table-column label="实付金额">
								<template #default="scope">
									<span> ￥{{ scope.row.realAmount }}元 </span>
								</template>
							</el-table-column>
							<el-table-column label="优惠">
								<template  #default="scope">
									<span> {{ amountFun(scope.row.ppcAlterMoney,scope.row.alterMoney) }} </span>
								</template>
							</el-table-column>
							<el-table-column label="整单改价">
								<template #default="scope">
									<span>{{ scope.row.alterMoney2 > 0 ? scope.row.alterMoney2 : "-" }}</span>
								</template>
							</el-table-column>
						</el-table>
					</el-row>
					<!-- 充值订单 -->
					<el-row v-if="state.orderData.order?.type == 2">
						<el-table :data="state.orderData.order?.itemsList2" border style="width: 100%">
							<el-table-column type="expand">
								<template #default="props">
									<div>
										<p class="ml20">
											<span>
												<span v-for="(item,index) in props.row.paymentList" :key="index">
													{{ item.payment }}:￥:{{ item.money }}元
												</span>
												销售人: 
												<span v-for="(item,index) in props.row.rebateList" :key="index">
													{{ item.employee }}(ID:{{ item.id }}){{ item.proportion }}
												</span>
											</span>
										</p>
									</div>
								</template>
							</el-table-column>
							<el-table-column width="290px" label="商品信息">
								<template #default="scope">
									<div class="goodBox"  style="display: flex;justify-content: space-between;">
										<div style="display: flex;align-items: center;">
											<div style="width:48px; height: 48px;">
												<el-image style="width:48px; height: 48px;border-radius: 5px;" :src="scope.row.cover" fit="cover" />
											</div>
											<div class="ml5">
												<p class="px2 goodMsg">{{ scope.row.title }}</p>
												<p class="px2 goodMsg">{{ scope.row.cardType }}{{ scope.row.attrValues }}</p>
											</div>
										</div>
										<div class="mr15">
											
										</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="充值金额">
								<template #default="scope">
									<span> ￥{{ scope.row.money }}元 </span>
								</template>
							</el-table-column>
							<el-table-column prop="originPrice" label="赠送金额">
								<template #default="scope">
									<span v-if="scope.row.worth == 0"> ￥{{ scope.row.originPrice }}元 </span>
									<span v-else> - </span>
								</template>
							</el-table-column>
							<el-table-column label="实售总价">
								<template #default="scope">
									<span> ￥{{ scope.row.money }}元 </span>
								</template>
							</el-table-column>
							<el-table-column label="实付金额">
								<template #default="scope">
									<span> ￥{{ scope.row.realAmount }}元 </span>
								</template>
							</el-table-column>
							<el-table-column label="欠款">
								<template #default="scope">
									<span> ￥{{ scope.row.arrears }}元 </span>
								</template>
							</el-table-column>
						</el-table>
					</el-row>
					<!-- 储值卡订单 -->
					<el-row v-if="state.orderData.order?.type == 9">
						<el-table :data="state.orderData.order?.itemsList2" border style="width: 100%">
							<el-table-column type="expand">
								<template #default="props">
									<div>
										<p class="ml20">
											<span>
												<span v-for="(item,index) in props.row.paymentList" :key="index">
													{{ item.payment }}:￥:{{ item.money }}元
												</span>
												销售人: 
												<span v-for="(item,index) in props.row.rebateList" :key="index">
													{{ item.employee }}(ID:{{ item.id }}){{ item.proportion }}
												</span>
											</span>
										</p>
									</div>
								</template>
							</el-table-column>
							<el-table-column width="290px" label="商品信息">
								<template #default="scope">
									<div class="goodBox"  style="display: flex;justify-content: space-between;">
										<div style="display: flex;align-items: center;">
											<div style="width:48px; height: 48px;">
												<el-image style="width:48px; height: 48px;border-radius: 5px;" :src="scope.row.cover" fit="cover" />
											</div>
											<div class="ml5">
												<p class="px2 goodMsg">{{ scope.row.title }}</p>
												<p class="px2 goodMsg">{{ scope.row.cardType }}{{ scope.row.attrValues }}</p>
											</div>
										</div>
										<div class="mr15">
											
										</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column  label="零售价">
								<template #default="scope">
									<span>￥{{ scope.row.originPrice }}元</span>
								</template>
							</el-table-column>
							<el-table-column label="零售总价">
								<template #default="scope">
									<span> ￥{{ scope.row.originAmount }}元 </span>
								</template>
							</el-table-column>
							<el-table-column label="实售总价">
								<template #default="scope">
									<span>￥{{ scope.row.money }}元</span>
								</template>
							</el-table-column>
							<el-table-column label="会员价">
								<template #default="scope">
									<span>￥{{ scope.row.plusPrice }}元</span>
								</template>
							</el-table-column>
							<el-table-column label="小计">
								<template #default="scope">
									<span>￥{{ scope.row.worth }}元</span>
								</template>
							</el-table-column>
							<el-table-column label="实付金额">
								<template #default="scope">
									<span>￥{{ scope.row.realAmount }}元</span>
								</template>
							</el-table-column>
							<el-table-column label="优惠">
								<template #default="scope">
									<span> {{ amountFun(scope.row.ppcAlterMoney,scope.row.alterMoney) }} </span>
								</template>
							</el-table-column>
							<el-table-column label="整单改价">
								<template #default="scope">
									<span>{{ scope.row.alterMoney2 > 0 ? scope.row.alterMoney2 : "-" }}</span>
								</template>
							</el-table-column>
							<el-table-column prop="alterMoney2" label="操作">
								<template #default>
									<el-button  text type="primary">详情</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-row>
					<!-- 活动订单 -->
					<el-row v-if="state.orderData.order?.type == 11">
						<el-table :data="state.orderData.order?.itemsList2" border style="width: 100%">
							<el-table-column type="expand">
								<template #default="props">
									<div>
										<p class="ml20">
											<span>
												<span v-for="(item,index) in props.row.paymentList" :key="index">
													{{ item.payment }}:￥:{{ item.money }}元
												</span>
												销售人: 
												<span v-for="(item,index) in props.row.rebateList" :key="index">
													{{ item.employee }}(ID:{{ item.id }}){{ item.proportion }}
												</span>
											</span>
										</p>
									</div>
								</template>
							</el-table-column>
							<el-table-column width="290px" label="商品信息">
								<template #default="scope">
									<div class="goodBox"  style="display: flex;justify-content: space-between;">
										<div style="display: flex;align-items: center;">
											<div style="width:48px; height: 48px;">
												<el-image style="width:48px; height: 48px;border-radius: 5px;" :src="scope.row.cover" fit="cover" />
											</div>
											<div class="ml5">
												<p class="px2 goodMsg">{{ scope.row.title }}</p>
												<p class="px2 goodMsg">{{ scope.row.cardType }}{{ scope.row.attrValues }}</p>
											</div>
										</div>
										<div class="mr15">
											x{{ scope.row.number }}
										</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column  label="零售价">
								<template #default="scope">
									<span>￥{{ scope.row.originPrice }}元</span>
								</template>
							</el-table-column>
							<el-table-column label="零售总价">
								<template #default="scope">
									<span> ￥{{ scope.row.originAmount }}元 </span>
								</template>
							</el-table-column>
							<el-table-column label="实售总价">
								<template #default="scope">
									<span>￥{{ scope.row.money }}元</span>
								</template>
							</el-table-column>
							<el-table-column label="实付金额">
								<template #default="scope">
									<span>￥{{ scope.row.realAmount }}元</span>
								</template>
							</el-table-column>
							<el-table-column prop="worth" label="小计">
								<template #default="scope">
									<span>￥{{ scope.row.worth }}元</span>
								</template>
							</el-table-column>
							<el-table-column prop="alterMoney2" label="操作">
								<template #default>
									<el-button  text type="primary">详情</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-row>
					<!-- 付费会员 -->
					<el-row v-if="state.orderData.order?.type == 19">
						<el-table :data="state.orderData.order?.itemsList2" border style="width: 100%">
							<el-table-column type="expand">
								<template #default="props">
									<div>
										<p class="ml20">
											<span>
												<span v-for="(item,index) in props.row.paymentList" :key="index">
													{{ item.payment }}:￥:{{ item.money }}元
												</span>
												销售人: 
												<span v-for="(item,index) in props.row.rebateList" :key="index">
													{{ item.employee }}(ID:{{ item.id }}){{ item.proportion }}
												</span>
											</span>
										</p>
									</div>
								</template>
							</el-table-column>
							<el-table-column width="290px" label="商品信息">
								<template #default="scope">
									<div class="goodBox"  style="display: flex;justify-content: space-between;">
										<div style="display: flex;align-items: center;">
											<div style="width:48px; height: 48px;">
												<el-image style="width:48px; height: 48px;border-radius: 5px;" :src="scope.row.cover" fit="cover" />
											</div>
											<div class="ml5">
												<p class="px2 goodMsg">{{ scope.row.title }}</p>
												<p class="px2 goodMsg">{{ scope.row.cardType }}{{ scope.row.attrValues }}</p>
											</div>
										</div>
										<div class="mr15">
											x{{ scope.row.number }}
										</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column  label="零售价">
								<template #default="scope">
									<span>￥{{ scope.row.originPrice }}元</span>
								</template>
							</el-table-column>
							<el-table-column label="零售总价">
								<template #default="scope">
									<span> ￥{{ scope.row.originAmount }}元 </span>
								</template>
							</el-table-column>
							<el-table-column label="实售总价">
								<template #default="scope">
									<span>￥{{ scope.row.money }}元</span>
								</template>
							</el-table-column>
							<el-table-column label="实付金额">
								<template #default="scope">
									<span>￥{{ scope.row.realAmount }}元</span>
								</template>
							</el-table-column>
							<el-table-column label="小计">
								<template #default="scope">
									<span>￥{{ scope.row.worth }}元</span>
								</template>
							</el-table-column>
							<el-table-column label="操作">
								<template #default>
									<el-button  text type="primary">详情</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-row>
				</el-card>
			</el-col>
			<!-- 支付详情 -->
			<el-col :span="24" class="order-pay-detail">
				<el-card shadow="hover" class="mt15" header="支付详情">
					<el-row>
						<el-col :span="24">
							<span v-if="state.orderData.type == 1">
								您总计购买
								<span class="span-col">{{ state.orderData.order?.itemsList2.length }}</span>
								种商品共
								<span class="span-col">{{ goodNumberFun(state.orderData.order?.itemsList2) }}</span>
								个
								<span>原价总计：<span>¥</span></span>
								<span>{{ goodMoneyFun(state.orderData.order?.itemsList2) }}</span>
							</span>
							<span v-if="state.orderData.type == 2">
								储值总计
								<span class="span-col">{{ state.orderData.order?.totalPrice }}</span>
							</span>
							<span v-if="state.orderData.type == 9">
								您总计购买储值卡共
								<span class="span-col">{{ goodNumberFun(state.orderData.order?.itemsList2) }}</span>
								张
								<span>储值卡总计：<span>¥</span></span>
								<span>{{ state.orderData.order?.totalMoney }}</span>
							</span>
							<span v-if="state.orderData.order?.plusDiscount > 0">
								会员折扣优惠：
								<span>¥</span>
								<span>{{state.orderData.order?.plusDiscount }}</span>
							</span>
							<span v-if="state.orderData.order?.ppcAlterMoney > 0">
								储值卡优惠：
								<span>¥</span>
								<span>{{state.orderData.order?.ppcAlterMoney}}</span>
							</span>
							<span v-if="state.orderData.order?.alterMoney > 0">
								手动优惠：
								<span>¥</span>
								<span>{{ state.orderData.order?.alterMoney }}</span>
							</span>
							<span v-if="state.orderData.order?.alterMoney2 > 0">
								整单改价：
								<span>¥</span>
								<span>{{ state.orderData.order?.alterMoney2 }}</span>
							</span>
							<span>
								订单总金额为：
								<span>¥</span>
								<span>{{ state.orderData.order?.totalPrice }}</span>
							</span>
						</el-col>
						<el-col>
							<span v-for="(item,index) in state.orderData.payList" :key="index">
								<span> {{ item.name }} </span>
								<span v-if="item.name =='现金'">
									<span v-if="state.orderData.order?.status == '待支付'">(系统已记录)</span>
								</span>：
								<span>¥</span>
								<span>
									{{ item.money }}元
									<span v-if="item.name =='欠款' && state.orderData.order?.status == '待支付'">
										({{item.payStatus}})
									</span>
									<span v-else-if="item.name !='现金'&& state.orderData.order?.status == '待支付'">
										({{item.payStatus}})
									</span>
								</span>
							</span>
							<span v-if="state.orderData.order?.status != '待支付'">
								<span>总实付金额：</span> 
								<span>￥</span><span>{{ state.orderData.order?.totalMoney }}</span>
							</span>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<!-- 还款详情 -->
		
			<el-col :span="24" v-for="(item,index) in state.orderData.repayOrderList" :key="index">
				<el-card shadow="hover" class="mt15" header="还款详情">
						<el-form :model="state.orderData"  label-position="left">
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<el-row :gutter="35">
									<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
										<el-form-item label="订单编号：">
											<span>{{ item.snkey }}</span>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
										<el-form-item label="还款时间：">
											<span>{{ item.alterTime }}</span>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
										<el-form-item label="操作时间：">
											<span>{{ item.createdTime }}</span>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
										<el-form-item label="操作人：">
											<span>{{ item.createdBy }}</span>
										</el-form-item>
									</el-col>
								</el-row>
							</el-col>
						</el-form>
					<el-row v-if="state.orderData.order?.type == 1">
						<el-table :data="item.itemsList2" border style="width: 100%">
							<el-table-column type="expand">
								<template #default="props">
									<div>
										<p class="ml20">
											<span>
												还款明细
												<span v-for="(item,index) in props.row.paymentList" :key="index">
													{{ item.payment }}:￥:{{ item.money }}元
												</span>
												销售人: 
												<span v-for="(item,index) in props.row.rebateList" :key="index">
													{{ item.employee }}(ID:{{ item.id }}){{ item.proportion }}
												</span>
											</span>
										</p>
									</div>
								</template>
							</el-table-column>
							<el-table-column width="290px" label="商品信息">
								<template #default="scope">
									<div class="goodBox"  style="display: flex;justify-content: space-between;">
										<div style="display: flex;align-items: center;">
											<div style="width:48px; height: 48px;">
												<el-image style="width:48px; height: 48px;border-radius: 5px;" :src="scope.row.cover" fit="cover" />
											</div>
											<div class="ml5">
												<p class="px2 goodMsg">{{ scope.row.title }}</p>
												<p class="px2 goodMsg">{{ scope.row.cardType }}{{ scope.row.attrValues }}</p>
											</div>
										</div>
										<div class="mr15">
											x{{ scope.row.number }}
										</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="零售价">
								<template #default="scope">
									<span>¥ {{ scope.row.originPrice }}</span>
								</template>
							</el-table-column>
							<el-table-column label="会员价">
								<template #default="scope">
									<span>¥ {{ scope.row.plusPrice }}</span>
								</template>
							</el-table-column>
							<el-table-column label="总欠款">
								<template #default="scope">
									<span>¥ {{ scope.row.arrears }}</span>
								</template>
							</el-table-column>
							<el-table-column label="本次总还款">
								<template #default="scope">
									<span>¥ {{ scope.row.money }}</span>
								</template>
							</el-table-column>
							<el-table-column label="剩余欠款">
								<template #default="scope">
									<span>¥ {{ scope.row.leftArrears }}</span>
								</template>
							</el-table-column>
							<!-- <el-table-column label="还款时间">
								<template #default="scope">
									<span>{{ scope.row }}</span>
								</template>
							</el-table-column>
							<el-table-column label="操作时间">
								<template #default="scope">
									<span>{{ scope.row.createdTime }}</span>
								</template>
							</el-table-column>
							<el-table-column label="操作人">
								<template #default="scope">
									<span>{{ scope.row.createdBy }}</span>
								</template>
							</el-table-column> -->
						</el-table>
					</el-row>
					<el-row>
						还款支付
						<el-row>
						<span v-for="(i, x) in item.payList" :key="x">
							{{ i.name }}：<span>¥</span> <span>{{ i.money }}元</span>
						</span>
						<div>
							总还款金额：<span>￥</span><span>{{ item.totalMoney }}</span>
						</div>
					</el-row>
					</el-row>
				</el-card>
			</el-col>
			<!-- 退款详情 -->
			<el-col :span="24" v-for="(item,index) in state.orderData.refundOrderList" :key="index">
				<el-card shadow="hover" class="mt15" header="退款详情">
					<el-row v-if="state.orderData.order?.type == 1">
						<el-table :data="item.itemsList2" border style="width: 100%">
							<el-table-column type="expand">
								<template #default="props">
									<div>
										<p class="ml20">
											<span>
												还款明细
												<span v-for="(item,index) in props.row.paymentList" :key="index">
													{{ item.payment }}:￥:{{ item.money }}元
												</span>
												销售人: 
												<span v-for="(item,index) in props.row.rebateList" :key="index">
													{{ item.employee }}(ID:{{ item.id }}){{ item.proportion }}
												</span>
											</span>
										</p>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="id" label="商品ID"></el-table-column>
							<el-table-column prop="title" label="商品名称" width="180"></el-table-column>
							<el-table-column prop="cardType" label="属性"></el-table-column>
							<el-table-column prop="attrValues" label="规格"></el-table-column>
							<el-table-column prop="originPrice" label="零售价"></el-table-column>
							<el-table-column prop="plusPrice" label="会员价"></el-table-column>
							<el-table-column prop="number" label="数量"></el-table-column>
							<el-table-column prop="originAmount" label="总价"></el-table-column>
						</el-table>
					</el-row>
					<el-row>
						退款支付
						<span v-for="(i, x) in item.payList" :key="x">
							{{ i.name }}：<span>¥</span> <span>{{ i.money }}元</span>
						</span>
						<div>
							总退款金额：<span>￥</span><span>{{ item.totalMoney }}</span>
						</div>
					</el-row>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts" name="order">
import { reactive, onMounted } from 'vue';
import { orderDetails } from '/@/api/order';
import type { saleOrderDetailsData } from "/@/types/order";
import { useRoute } from 'vue-router';
const route = useRoute();



// 定义变量内容
const state = reactive({
	orderForm: {
		name: '',
		email: '',
		autograph: '',
		occupation: '',
		phone: '',
		sex: '',
	},
	orderData: {} as saleOrderDetailsData
});


onMounted( async() => {
	const { results } = await orderDetails(route.query.id);
	state.orderData = results;
})

// 总个数
const goodNumberFun = (item:Array) => {
	let num = 0
	// item.map((item) => {
	// 	num += item.number
	// })
	return num;
};
// 原件
const amountFun = (num1:any,num2:any) => {
	let num = parseInt(num1) + parseInt(num2);
	let returnValue;
	if(num == 0){
		returnValue = "-"
	}else{
		returnValue = "￥"+num+"元"
	}
	return returnValue;
};


</script>

<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';

.order {
	.order-user {
		height: 130px;
		display: flex;
		align-items: center;

		.order-user-left {
			width: 100px;
			height: 130px;
			border-radius: 3px;

			:deep(.el-upload) {
				height: 100%;
			}

			.order-user-left-upload {
				img {
					width: 100%;
					height: 100%;
					border-radius: 3px;
				}

				&:hover {
					img {
						animation: logoAnimation 0.3s ease-in-out;
					}
				}
			}
		}

		.order-user-right {
			flex: 1;
			padding: 0 15px;

			.order-title {
				font-size: 18px;
				@include text-ellipsis(1);
			}

			.order-item {
				display: flex;
				align-items: center;
				font-size: 13px;

				.order-item-label {
					color: var(--el-text-color-secondary);
					@include text-ellipsis(1);
				}

				.order-item-value {
					@include text-ellipsis(1);
				}
			}
		}
	}

	.order-info {
		.order-info-more {
			float: right;
			color: var(--el-text-color-secondary);
			font-size: 13px;

			&:hover {
				color: var(--el-color-primary);
				cursor: pointer;
			}
		}

		.order-info-box {
			overflow: hidden;

			.order-info-ul {
				list-style: none;

				.order-info-li {
					font-size: 13px;
					padding-bottom: 10px;

					.order-info-li-title {
						display: inline-block;
						@include text-ellipsis(1);
						color: var(--el-text-color-secondary);
						text-decoration: none;
					}

					& a:hover {
						color: var(--el-color-primary);
						cursor: pointer;
					}
				}
			}
		}
	}

	.order-pay-detail{

	}
		.goodBox {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			box-sizing: border-box;
			overflow: hidden;
			.goodMsg {
				@include text-ellipsis(2);
			}
			p {
				@include text-ellipsis(1);
			}
		}

		


		.el-col:last-child {
			border-right: none;
		}

}
</style>
